<template>
  <div class="mask__warp">
    <div class="mask-loading-icon">
      <a-icon
        type="loading-3-quarters"
        spin
        class="mask__loading--icon"
      ></a-icon>
      <div class="mask__tile">数据加载中</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "dhtMask",
  data() {
    return {
      fullscreen: false,
    };
  },
  mounted() {
    if (this.fullscreen) {
      document.body.style.overflow = "hidden";
    }
  },
  destroyed() {
    document.body.style.overflowX = "hidden";
  },
};
</script>

<style lang="less" scoped>
.mask__warp {
  position: absolute;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 99999;
}
.mask-loading-icon {
  font-size: 30px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #1890ff;
  .mask__loading--icon {
    font-size: 25px;
    padding-bottom: 10px;
  }
}
</style>
